<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div style="background: #efefef">
    <!--  顶部标签  -->
    <div
      :style="{background: 'url('  +   artist.artist.cover   + ')',width:'100%',height:'300px',backgroundSize:'cover',backgroundRepeat:'no-repeat'}"
      v-if="artist.artist">
      <van-nav-bar style="background: transparent" :border="false">
        <template #left>
          <van-icon name="zuojiantou" class-prefix="iconfont" color="#ffffff" size="28px"
                    @click="$router.back()"></van-icon>
        </template>
        <template #right>
          <van-icon name="gengduo-shuxiang" class-prefix="iconfont" color="#ffffff" size="28px"></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div v-if="artist.artist"
         style="text-align: center;background: #ffffff;margin: -50px 15px 0 15px;padding: 15px;border-radius: 15px">
      <div>{{ artist.artist.name }}</div>
      <div style="font-size: 8px;font-weight: 300;color: #999;padding-top: 10px">{{ artist.artist.alias[0] }}</div>
      <div style="font-size: 16px;font-weight: 300;color: #999;padding-top: 10px">{{ followCount.fansCnt }}</div>
      <div
        style="font-size: 14px;font-weight: 300;color: #999;padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
        {{ artist.identify.imageDesc }}
      </div>
      <div style="margin-top: 10px">
        <van-icon :name="followCount.isFollow===true?'success':'plus'"
                  :color="followCount.isFollow===true? '#000':'#ce3b36'"></van-icon>
        <span @click="changeSub(artist.artist.id,followCount.isFollow)"
              :style="followCount.isFollow===true?{color:'#000'}:{color: '#ce3b36'}">{{
            followCount.isFollow === true ? '已关注' : '关注'
          }}</span>
        <span>
          <van-icon :name="simiListFlag!==true?'arrow-down':'arrow-up'" @click="simiListFlag=!simiListFlag"
                    style="border-radius: 15px;border: 1px solid black;"></van-icon>
        </span>
      </div>
      <van-swipe :loop="false" :width="100" v-if="simiListFlag" :show-indicators="false" style="padding: 10px 0">
        <van-swipe-item v-for="(item,index) in simiList" :key="index"
                        style="background: #f6f6f6;margin: 0 5px;border-radius: 10px;">
          <div style="padding-top: 10px;">
            <img :src="item.picUrl" style="width: 60px;height:60px;border-radius: 50%">
          </div>
          <div>{{ item.name }}</div>
          <div style="color: #999;font-size: 14px">{{ item.fansCount }}</div>
          <div
            @click="changeSub(item.id,item.followed)"
            :style="item.followed===true?{background:'#f6f6f6',border:'1px solid #999',color:'#999'}:{background:'#fc3a3a'}"
            style="width: 80px;margin: 5px 10px 0 10px;border-radius: 15px">
            {{ item.followed === true ? '已关注' : '关注' }}
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-tabs v-model="active" sticky background="#efefef"
                v-if="artist.artist"
                @click="changeTabs">
        <van-tab title="主页" style="padding: 0 10px">
          <div style="margin-top: 10px;background: #ffffff;padding: 10px;border-radius: 10px">
            <div style="font-size: 20px">
              <span>艺人百科</span>
              <van-icon name="arrow"/>
            </div>
            <div
              style="font-size: 14px;text-indent: 2em;margin-top: 10px;font-weight: 300;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box">
              {{ artistDesc.briefDesc }}
            </div>
          </div>

          <div style="margin-top: 10px;background: #ffffff;padding: 10px;border-radius: 10px">
            <div>
              <van-swipe :show-indicators="false" :loop="true" :autoplay="3000">
                <van-swipe-item v-for="(item,index) in artistDesc.introduction" :key="index"
                                :style="{background: color[index] }">
                  <div style="font-size: 20px;padding: 10px">
                    <span>{{ item.ti }}</span>
                    <van-icon name="arrow"/>
                  </div>
                  <div
                    style="text-indent:2em;text-overflow: ellipsis;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box">
                    {{ item.txt }}
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>

        </van-tab>
        <van-tab title="歌曲">
          <van-tabs background="#efefef" line-width="0" line-height="0" @click="changeTabss" v-model="active2">
            <van-tab v-for="(item,index) in artist.secondaryExpertIdentiy" :key="index"
                     :title="item.expertIdentiyName" v-if="item.expertIdentiyCount>1">
              <template #title>
                <div style="padding: 5px 15px;border-radius: 15px"
                     :style="item.expertIdentiyName===artSongsTitle?{background:'#fd6260',color:'#efefef'}:{}">
                  <span>
                    {{ item.expertIdentiyName }}
                  </span>
                </div>
              </template>
              <div>
                <van-cell :border="false" style="background: #ffffff">
                  <!-- 使用 title 插槽来自定义标题 -->
                  <template #title>
                    <van-icon name="gf-playCircle" color="#e33536" class-prefix="iconfont" size="24">
                      <span style="color:#000;margin: 0 5px;font-size: 20px">播放热门{{ songsList.length }}</span>
                    </van-icon>
                  </template>
                  <template #right-icon>
                    <van-icon name="xiazaidaoru" color="#000" class-prefix="iconfont" size="24"
                              style="margin: 0 10px"/>
                    <van-icon name="shebeiguanli" color="#000" class-prefix="iconfont" size="24"/>
                  </template>
                </van-cell>
                <div v-if="artSongsTitle === '演唱'" style="background: #ffffff">
                  <van-row v-for="(items,indexx) in songsList" :key="indexx" type="flex" align="center"
                           justify="space-around"
                           style="padding: 10px 0" @click="gotoMusicPlayBack(items.id)">
                    <van-col span="3" style="text-align: center;color: #808080;font-size: 20px;font-weight: 600;">
                      {{ indexx + 1 }}
                    </van-col>
                    <van-col span="15" style="margin-left: 12px">
                      <div style="color:#000 ">{{ items.name }}</div>
                      <div style="font-size: 12px;color:#000;">
                        <span>{{ items.ar[0].name }}</span>
                        <span>- {{ items.al.name }}</span>
                      </div>
                      <div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                        <span style="background: #fdf0e7;font-size: 12px;color: #ea8b50;">{{ items.awardName }}</span>
                      </div>
                    </van-col>
                    <van-col span="3">
                      <van-icon name="bofangshipin" class-prefix="iconfont" size="20px" color="#808080"></van-icon>
                    </van-col>
                    <van-col span="2">
                      <van-icon name="gengduo-shuxiang" class-prefix="iconfont" size="20px" color="#808080"></van-icon>
                    </van-col>
                  </van-row>
                </div>
                <div style="background: #ffffff">
                  <van-row v-for="(items,indexx) in songsList" :key="indexx" type="flex" align="center"
                           justify="space-around"
                           v-if="items.no===item.expertIdentiyId"
                           style="padding: 10px 0" @click="gotoMusicPlayBack(items.id)">
                    <van-col span="3" style="text-align: center;color: #808080;font-size: 20px;font-weight: 600;">
                      {{ indexx + 1 }}
                    </van-col>
                    <van-col span="15" style="margin-left: 12px">
                      <div style="color:#000 ">{{ items.name }}</div>
                      <div style="font-size: 12px;color:#000;">
                        <span>{{ items.ar[0].name }}</span>
                        <span>- {{ items.al.name }}</span>
                      </div>
                      <div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
                        <span style="background: #fdf0e7;font-size: 12px;color: #ea8b50;">{{ items.awardName }}</span>
                      </div>
                    </van-col>
                    <van-col span="3">
                      <van-icon name="bofangshipin" class-prefix="iconfont" size="20px" color="#808080"></van-icon>
                    </van-col>
                    <van-col span="2">
                      <van-icon name="gengduo-shuxiang" class-prefix="iconfont" size="20px" color="#808080"></van-icon>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
        <van-tab title="专辑" :badge="artist.artist.albumSize" style="padding: 0 10px">内容 1</van-tab>
        <van-tab title="视频" :badge="artist.artist.mvSize" style="padding: 0 10px">内容 1</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  getArtistDesc,
  getArtistDetail,
  getArtistFollowCount,
  getArtistTopSong,
  getSimiArtist,
  updateArtistesSub
} from "../../api/artist";

export default {
  name: "index",
  data() {
    return {
      id: this.$route.query.id,
      artist: [],
      simiList: [],//相似歌手
      simiListFlag: false,
      active: 1,
      artistDesc: [],//歌手描述
      followCount: 0,//歌手粉丝量
      color: ['#f2f4ef', '#f2f2f2', '#efefef'],
      artSongsTitle: '',
      active2: 0,
      songsList: [],//歌手热门50首歌曲
    }
  },
  created() {
    this.init()
    this.artSongsTitle = '演唱'
  },
  methods: {
    init() {
      //获取歌手详情
      getArtistDetail(this.id).then(res => {
        this.artist = res.data.data
        console.log(this.artist)
      })
      //歌手描述
      getArtistDesc(this.id).then(res => {
        this.artistDesc = res.data
        // console.log(res)
      })
      //获取相识歌手
      getSimiArtist(this.id).then(res => {
        this.simiList = res.data.artists
        this.simiList.forEach(item => {
          if (item.fansCount > 10000) {
            item.fansCount = ((item.fansCount) / 10000).toFixed(1) + '万粉丝'
          } else {
            item.fansCount = item.fansCount + '粉丝'
          }
        })
      })
      //歌手粉丝量
      getArtistFollowCount(this.id).then(res => {
        this.followCount = res.data.data
        if (this.followCount.fansCnt > 10000) {
          this.followCount.fansCnt = (this.followCount.fansCnt / 10000).toFixed(1) + '万 粉丝'
        } else {
          this.followCount.fansCnt = this.followCount.fansCnt + '位 粉丝'
        }
      })
      //歌手热门50首歌曲
      getArtistTopSong(this.id).then(res => {
        this.songsList = res.data.songs
      })
    },
    // 进行添加/取消收藏
    changeSub(id, followed) {
      let t = followed === true ? '0' : '1'
      updateArtistesSub(id, t).then(res => {
        if (res.status === 200) {
          this.$toast.success('操作成功')
          //获取歌手详情
          this.artist = []
          this.simiList = []
          this.init()
        }
      })
    },
    // 改变tabs标签时请求
    changeTabs(name, title) {
      console.log(title)
    },
    changeTabss(name, title) {
      this.artSongsTitle = title
      console.log(title)
    },
    // 跳转到歌曲详情
    gotoMusicPlayBack(id) {
      this.$router.push({name: 'musicPlayBack', query: {id: id}})
    }
  }
}
</script>

<style scoped>

</style>
